body{
  position: relative;
}

header{
  height: 26%;
  .swiper {
    width: 100%;
    height: 100%;
    img{
      width: 100%;
      height: 100%;
      //  属性指定元素的内容应该如何去适应指定容器的高度与宽度
      object-fit: cover;}
}  
}


.main{
    align-content: space-evenly;
    flex: 1;
    flex-wrap: wrap;
    margin-bottom: 64px;
    justify-content: space-around;
 .ranking,.clock{
    height: 25%;
    width: 45%;
    border-radius: 15px;
  }
    .text{
      font-size: 18px;
      font-weight: 600;
      position: absolute;
      left: 8px;
      top: 10px;
      color: #004e73;
    }
  .ranking{
    background-color: #54afda;
    width: 40%;
    overflow: hidden;
    position: relative;
    .iconfont{
      font-size: 100px;
       margin: 4px 0 0px -18px;
      color: #87c7e5;
      position: absolute;
    }
  
    .num{
      font-size: 70px;
      font-weight: 600;
      color: #fff;
      position: absolute;
     right: 10px;
     bottom: 0;
    }
  }
  
  .clock{ 
    position: relative;
    background-color: #9fd9f8 ;
    width: 50%;
    .iconfont{
      font-size: 100px;
      color: #dff2fd;
      position: absolute;
      margin-top: 4px;
    }
   .today{
    position: absolute;
    right: 20px;
    bottom: 25px;
    padding:5px 10px;
    border: 3px solid #004e73;
    color: #004e73;
    border-radius: 20px;
   }
  }
  .data,.badge{
    height: 20%;
    width: 45%;
    border-radius: 15px;
  }
  .data{
    background-image:url('../../assets/imgs/index-card-data.png');
    background-size: cover;
  }
  .badge{
    background-color: #95ACCE;
    position: relative;
    .iconfont{
      font-size: 90px;
      color: #dff2fd;
      position: absolute;
    }
    .text{
      font-size: 16px;
    }
    div{
     position: absolute;
     right: 10px;
     bottom: 0;
     font-size: 18px;
     color: #004e73;
     font-weight: bold;
    }
    .num{
      font-size: 70px;
      font-weight: 600;
      color: #004e73;
     
    }
  }
.curriculum,.run{
    width: 95%;
    height: 100px;
    border-radius: 15px;
}

  .curriculum{
    background: url('../../assets/imgs/index-swiper-bg2.jpg') no-repeat center / cover;
     background-position: 0 -20px;
  }
  .run{
    background: url('../../assets/imgs/course-img02.png') no-repeat center / cover;
  }
}